<template>
  <div class="wrapper">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="form.birth" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="兴趣爱好">
        <el-input type="textarea" v-model="form.hobby" class="hobby"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
    <el-button type="warning" class="changepassword" @click="changepassword"
      >修改密码</el-button
    >
  </div>
</template>

<script>
import { log } from "util";
export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        name: "",
        age: "",
        address: "",
        birth: "",
        sex: "",
        hobby: ""
      },
      mine: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    async getUserinfo() {
      await this.$http.get("../../static/json/mine.json").then(res => {
        this.mine = res.data;
      });
      this.form = this.mine;
    },
    onSubmit() {
      console.log(this.form.birth);
      return this.$message({
        message: "保存成功",
        type: "success"
      });
    },
    reset() {
      this.form = this.mine;
    },
    changepassword() {
      this.$router.push("/password");
    }
  },
  created() {},
  mounted() {
    this.getUserinfo();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 50px 20px;
  width: 800px;
  position: relative;
}
.hobby {
  color: black;
  font-size: 16px;
  font-weight: 900;
}
.changepassword {
  position: absolute;
  right: -200px;
  top: 50px;
}
</style>
